<script setup lang="ts">
import { ref, onMounted, onUnmounted, onBeforeUnmount } from 'vue'
import debounce from 'lodash.debounce'

defineProps<{
  paddingTop: number
}>()

const numbers = ref<string[]>([])
const animationTimer = ref<number | null>(null)
const emit = defineEmits<{
  (e: 'drawComplete', winningNumber: string): void
}>()

// 生成随机数
const generateRandomNumbers = () => {
  const result: string[] = []
  for (let i = 0; i < 16; i++) {
    const num = Math.floor(Math.random() * 900000) + 100000 // 生成6位数
    result.push(num.toString())
  }
  numbers.value = result
}

// 开始动画
const startAnimation = () => {
  if (animationTimer.value) return

  animationTimer.value = window.setInterval(() => {
    generateRandomNumbers()
  }, 100) // 每100ms更新一次数字
}

// 停止动画
const stopAnimation = () => {
  if (animationTimer.value) {
    window.clearInterval(animationTimer.value)
    animationTimer.value = null
    // 选择一个随机数作为中奖号码
    const winningNumber = numbers.value[Math.floor(Math.random() * numbers.value.length)]
    emit('drawComplete', winningNumber)
  }
}

// 处理空格键事件
const handleKeydown = debounce((event: KeyboardEvent) => {
  if (event.code === 'Space') {
    event.preventDefault()
    stopAnimation()
  }
}, 300)

// 组件挂载时开始动画和添加键盘监听
onMounted(() => {
  generateRandomNumbers()
  startAnimation()
  window.addEventListener('keydown', handleKeydown)
})

// 组件卸载时清理
onUnmounted(() => {
  stopAnimation()
  window.removeEventListener('keydown', handleKeydown)
})

defineExpose({
  startAnimation,
  stopAnimation,
})
</script>

<template>
  <div class="flex flex-col items-center flex-1" :style="`padding-top: ${paddingTop}px`">
    <div
      class="grid gap-4 p-4"
      :class="{
        'grid-cols-2': numbers.length <= 4,
        'grid-cols-3': numbers.length > 4 && numbers.length <= 9,
        'grid-cols-4': numbers.length > 9,
      }"
    >
      <div
        v-for="(number, index) in numbers"
        :key="index"
        class="relative flex justify-center items-center bg-[#1a1b4b] rounded-lg p-8 overflow-hidden lottery-box"
      >
        <span
          class="text-4xl font-bold text-[#ffd700] animate-pulse"
          style="text-shadow: 0 0 10px #ffd700"
        >
          {{ number }}
        </span>
        <!-- 渐变边框效果 -->
        <div class="absolute inset-0 border-gradient"></div>
      </div>
    </div>
    <div class="text-[#ffd700] mt-2 px-2 bg-black/45">按空格结束抽奖</div>
  </div>
</template>

<style scoped>
.lottery-box {
  position: relative;
  z-index: 1;
}

.border-gradient {
  z-index: -1;
  background: linear-gradient(
    90deg,
    #ff0000,
    #ff7300,
    #fffb00,
    #48ff00,
    #00ffd5,
    #002bff,
    #7a00ff,
    #ff00c8,
    #ff0000
  );
  background-size: 400%;
  animation: gradient 10s linear infinite;
  filter: blur(1px);
}

.border-gradient::before {
  content: '';
  position: absolute;
  inset: 2px;
  background: #1a1b4b;
  border-radius: 6px;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes numberPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.animate-pulse {
  animation: numberPulse 1s infinite;
}
</style>
